<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { applyRecord, accept } from '@/api/express'
import { toast } from '@/utils/common'

const recordList = ref<any[]>([])
const takeId = ref<number>()
const keyword = ref('')

const loadRecord = async () => {
  const res = await applyRecord({ takeId: takeId.value, keyword: keyword.value })
  recordList.value = res.data
}
onLoad(async (option: any) => {
  takeId.value = option.id
  await loadRecord()
})

const agree = async (item: any) => {
  try {
    await accept(item.id)
    loadRecord()
  } catch (e) {
    toast(e.tips)
  }
}

const showPhone = (phone: string) => {
  uni.makePhoneCall({
    phoneNumber: phone
  })
}
const handleSearchChange = (e: any) => {
  keyword.value = e.detail.value
}
const handleSearch = async () => {
  await loadRecord()
}

</script>

<template>
  <view class="apply-record">
    <view class="record-search">
      <input class="record-search-input" @input="handleSearchChange" placeholder="请输入手机号或昵称" @confirm="handleSearch"
        confirm-type="search" />
      <button class="record-search-btn" @click="handleSearch">搜索</button>
    </view>
    <uv-empty class="record-empty" v-if="!keyword && (!recordList || recordList.length <= 0)" text="暂无人申请~"></uv-empty>
    <view v-else class="record-item" v-for="(item, index) in recordList" :key="index">
      <view class="record-item-user-info">
        <my-avatar class="userinfo-avatar" :src="item.avatar"></my-avatar>
        <view class="userinfo-right">
          <uv-text size="28rpx" color="#333" lineHeight="40rpx" :text="item.nickname"></uv-text>
          <uv-text class="userinfo-timeAgo" size="24rpx" color="#999" :text="item.applyTime"></uv-text>
        </view>
      </view>
      <view class="record-item-opt">
        <uv-button v-if="item.status === 1" type="success" size="small" text="同意" @click="agree(item)"></uv-button>
        <view v-else-if="item.status === 2" class="record-item-opt-agree">
          <uv-icon name="phone-fill" size="28" color="#2979ff" @click="showPhone(item.phone)"></uv-icon>
          <uv-text text="已通过" type="success" style="justify-content: flex-end;"></uv-text>
        </view>
        <uv-text v-else text="已拒绝" type="error" style="justify-content: flex-end;"></uv-text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.record-search {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80rpx;
  padding: 10rpx 20rpx 6rpx;
  background: #fff;

  &-input {
    flex-grow: 1;
    height: 60rpx;
    padding: 0 20rpx;
    overflow: hidden;
    font-size: 28rpx;
    color: #333333;
    background: #f6f6f6;
    border-radius: 8rpx 0 0 8rpx;
  }

  &-btn {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 60rpx;
    padding: 0 20rpx;
    overflow: hidden;
    font-size: 28rpx;
    color: #333333;
    background: #f6f6f6;
    border: none;
    border-radius: 0 8rpx 8rpx 0;

    &::after {
      display: none;
    }
  }
}

.apply-record {
  padding: 20rpx;
  background-color: #fff;

  .record-empty {
    height: calc(100vh - 200rpx);
  }

  .record-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f1f1f1;
    padding: 20rpx 0;

    &-user-info {
      display: flex;
      justify-content: left;
      flex-direction: row;
      flex: 1;

      .userinfo-right {
        display: flex;
        flex-direction: column;
        margin-left: 20rpx;
        width: calc(100% - 100rpx);
      }
    }

    &-opt {
      display: flex;
      justify-content: right;
      flex-direction: row;
      flex: 1;
      align-items: center;

      .record-item-opt-agree {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>